<template>
	<view class="novel">
		<view class="about">
			<view class="cover">
				<image :src="novdetail.cover" mode="aspectFill"></image>
			</view>
			<view class="desc">
				<view class="nov_name">{{novdetail.name}}</view>
				<view class="autor">作者:{{novdetail.p_name}}</view>
				<view class="date">总访问量:{{novdetail.clicked}}</view>
				<view class="date">创作日期:{{novdetail.created_at}}</view>
				
			</view>
		</view>
		<view class="intro-area">
			<view class="intro-tip">简介</view>
			<view class="intro">{{novdetail.intro}}</view>
		</view>
		
		<view class="chapters" @tap.stop="href('/pages/post/comps/novchapters/chapterList?nid='+novdetail.id + '&action_nov_chapter=' +action_nov_chapter)">
			<text>查看章节</text>
			<view class="right">
				<image src="/static/images/user/godetail.png" mode=""></image>
			</view>
		</view>
		<view class="newchapters"  @tap.stop="href('/pages/post/comps/novchapters/chapterdetail?nov_id='+novdetail.id +'&cid='+ novdetail.new_chapter.id )">
			<text>最新章节:{{novdetail.new_chapter.title}}</text>
			<view class="right">
				<image src="/static/images/user/godetail.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../../common/api.js'
	export default {
		data() {
			return { 
				nid:'',		//小说id
				action_nov_chapter:'', 	//是否显示对小说章节进行删除，修改等操作
				novdetail:{}		//小说详情页数据
			}
		},
		async onLoad(p) {
			console.log(p);
			this.nid = p.nid
			this.action_nov_chapter = p.action_nov_chapter
			this.novdetail = await api.GetNovelDetail(this.nid)
			console.log('action_nov_chapter',this.action_nov_chapter);
		},
		methods:{
			href(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
.novel {
	padding: 20rpx 30rpx;
}
.chapters,.newchapters {
	display: flex;
	align-items: center;
	height: 120rpx;
	justify-content: space-between;
	margin-top: 50rpx;
	border-top: 2rpx solid #F3F6F5;
	border-bottom: 2rpx solid #F3F6F5;
	image {
		width: 45rpx;	
		height: 45rpx;
	}
}
.newchapters {
	margin-top: 0;
}
.about {
	display: flex;
	background-color: #FFFFFF;
	.cover {
		width: 200rpx;
		height: 200rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.desc {
		display: flex;
		width: 480rpx;
		height: 150rpx;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20rpx;
		font-size: 30rpx;
		line-height: 52rpx;
		.nov_name {
			font-size: 32rpx;
		}
		.autor-area {
			display: flex;
			font-size: 30rpx;
			.autor {
				margin-right: 20rpx;
			}
			
		}
	}
}
.intro-area {
	padding: 30rpx 0;
	.intro-tip {
		padding: 10rpx 0;
	}
	.intro {
		display: -webkit-box;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 4;
		line-clamp: 4;
		-webkit-box-orient: vertical;
		font-size: 30rpx;
	}
}

</style>
